<template>
    <div style="display: inline-block;">
        <div id="reward" class="above"></div>
        <div id="user" class="above"></div>
        <div id="post" class="below"></div>
    </div>
</template>

<script>
import { Pie, DualAxes } from '@antv/g2plot';
import { mapActions ,mapState} from 'vuex'
export default {
    computed: {
    ...mapState({
      signIn: state => state.account.signIn,
      account: state => state.account.account
    })},
    data(){
        return{
            reward_All:{waiting:11,doing:45,finished:14},
            user_All:{guest:11,verified:45,locked:14},
            post_All:[11,45,14,19,19,8,10]
        }
    },
    mounted(){
        if(this.signIn===false||this.account===null){
            this.openNotification("NOK","未登录","请先登录管理员账号!")
            this.$router.push("/mainPage/login")
        }
        else{
            // this.getDataStatistic();

            this.rewardPaint();
            this.userPaint();
            this.postPaint();
        }
    },
    methods:{
        ...mapActions({
            getStatistic: 'dataStatistic/getStatistic',
        }),
        getDataStatistic(){
            this.getStatistic().then((res)=>{
                this.reward_All = res.reward_All
                this.user_All = res.user_All
                this.post_All = res.post_All
                this.rewardPaint();
                this.userPaint();
                this.postPaint();
            },(error)=>{
                this.openNotification("NOK","加载出错","服务器出现问题，请重新加载")
                this.rewardPaint();
                this.userPaint();
                this.postPaint();
            })
        },
        rewardPaint(){
            const data = [
                { type: '待揭榜', value: this.reward_All.waiting },
                { type: '已揭榜', value: this.reward_All.doing },
                { type: '已完成', value: this.reward_All.finished },
            ];

            this.piePlot = new Pie('reward', {
                appendPadding: 10,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 0.8,
                label: {
                type: 'inner',
                offset: '-30%',
                content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
                style: {
                    fontSize: 14,
                    textAlign: 'center',
                    },
                },
                interactions: [{ type: 'element-active' }],
            });
            this.piePlot.render();
        },
        userPaint(){
            const data = [
                { type: '游客', value: this.user_All.guest },
                { type: '已实名', value: this.user_All.verified },
                { type: '封禁中', value: this.user_All.locked },
            ];

            this.piePlot = new Pie('user', {
                appendPadding: 10,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 0.8,
                label: {
                type: 'inner',
                offset: '-30%',
                content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
                style: {
                    fontSize: 14,
                    textAlign: 'center',
                    },
                },
                interactions: [{ type: 'element-active' }],
            });
            this.piePlot.render();
        },
        getTime(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth()+1;
            const day = date.getDate();
            this.month = check(month);
            this.day = check(day);
            function check(i){
                const num = (i<10)?('0'+i):i;
                return num;
            }
            let nowTime = ' '+year+'-'+this.month+'-'
            return [nowTime+this.day,nowTime+(this.day-1),nowTime+(this.day-2),nowTime+(this.day-3),nowTime+(this.day-4),nowTime+(this.day-5),nowTime+(this.day-6)]
        },
        postPaint(){
            let showTime = this.getTime()
            
            const data = [
                { 时间: showTime[6], 记录数: this.post_All[6], 变化值: this.post_All[6]-this.post_All[6] },
                { 时间: showTime[5], 记录数: this.post_All[5], 变化值: this.post_All[5]-this.post_All[6] },
                { 时间: showTime[4], 记录数: this.post_All[4], 变化值: this.post_All[4]-this.post_All[5] },
                { 时间: showTime[3], 记录数: this.post_All[3], 变化值: this.post_All[3]-this.post_All[4] },
                { 时间: showTime[2], 记录数: this.post_All[2], 变化值: this.post_All[2]-this.post_All[3] },
                { 时间: showTime[1], 记录数: this.post_All[1], 变化值: this.post_All[1]-this.post_All[2] },
                { 时间: showTime[0], 记录数: this.post_All[0], 变化值: this.post_All[0]-this.post_All[1] },
            ];

            const dualAxes = new DualAxes('post', {
            data: [data, data],
            xField: '时间',
            yField: ['记录数', '变化值'],
            geometryOptions: [
                {
                geometry: 'column',
                },
                {
                geometry: 'line',
                lineStyle: {
                    lineWidth: 2,
                },
                },
            ],
            });

            dualAxes.render();
        },
        openNotification(type,title,msg) {
            let iconType = ''
            let iconColor = ''
            if(type=='OK'){
                iconType = 'smile'
                iconColor = '#52c41a'
            }
            else
            {
                iconType = 'frown'
                iconColor = '#eb2f96'
            }
            this.$notification.open({
                message: title,
                description: msg,
                icon: h => h('a-icon', {
                props: {
                    type: iconType,
                    theme: 'twoTone',
                    'two-tone-color': iconColor
                }
                }),
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.above{
    width: 400px;
    height: 300px;
    float: left;
}

.below{
    width: 800px;
    height: 600px;
}
</style>